<template>
<div>
  <div v-if="hasList">
    <div class="cart-list" v-for="(item,index) in carts" :key="index">
      <icon v-if="item.selected" type="success" color="red" v-bind:data-index="index"  class="cart-pro-select" @tap="selectList"/>
      <icon v-else type="circle" class="cart-pro-select" v-bind:data-index="index" @tap="selectList"/>
      <div @tap="toMerchGoods(item.id)"><image class="cart-thumb" :src="item.goodmgd" ></image></div>
      <text class="cart-pro-name">{{item.goodname}}</text>
      <text class="cart-pro-price">￥{{item.goodprice}}</text>
      <div class="cart-count-box">
        <text class="cart-count-down" @tap="minusCount" v-bind:data-obj="obj" v-bind:data-index="index">-</text>
        <text class="cart-count-num">{{item.num}}</text>
        <text class="cart-count-add" @tap="addCount" v-bind:data-index="index">+</text>
      </div>
      <text class="cart-del" @tap="deleteList" v-bind:data-index="index" >×</text>
    </div>

    <div class="cart-footer">
      <icon v-if="selectAllStatus" type="success_circle" color="#fff" class="total-select" @tap="selectAll"/>
      <icon v-else type="circle" color="#fff" class="total-select" @tap="selectAll"/>
      <div class="order-icon">
        <image src="cloud://text-17tek.7465-text-17tek-1301448855/20200706161351.png" @tap="toOrder"></image>
      </div>
      <text>全选</text>
      <text class="cart-toatl-price">￥{{totalPrice}}</text>
    </div>
  </div>
  <div v-else>
    <div class="cart-no-data">购物车是空的哦~</div>
  </div>
 </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      carts: [],
      hasList: false,
      totalPrice: 0,
      selectAllStatus: true,
      openid: ''

    }
  },
  beforeMount () {
    // 触发授权
    this.handleGetUserInfo()
    var that = this
    // 云函数调用getpoenid获取openid
    wx.cloud.callFunction({
      name: 'getopenid',
      data: {
        name: ''
      },
      success (res) {
        var id = []
        console.log(res)
        id = that.my
        that.openid = res.result.openid
        console.log(that.openid)
        for (var i = 0; i < id.length; i++) {
          if (that.openid === id[i]) {
            that.admin = true
          }
        }
      },
      fail (res) {
        console.log(res)
      }
    })
    wx.cloud.database().collection('order').where({
      _openid: this.$mp.query.openid
    }).get({
      success: res => {
        this.carts = res.data
        console.log(res.data)
        setTimeout(() => {
          this.hasList = true
          this.getTotalPrice()
        }, 2000)
      },
      fail: console.error
    })
  },

  components: {
    card
  },

  methods: {
    // 获取用户信息
    handleGetUserInfo () {
      wx.getUserInfo({
        success: (data) => {
          console.log(data)
          this.userInfo = data.userInfo
          this.isShow = true
        },
        fail: () => {
          console.log('获取失败')
        }
      })
    },
    getUserInfo (data) {
      // 判断用户是否授权
      console.log(data)
      if (data.mp.detail.rawData) {
      // 用户授权
        this.handleGetUserInfo()
      }
    },
    // 跳转商品管理
    toMerchGoods (id) {
      wx.navigateTo({
        url: '../../pages/goodsdetail/main?id=' + id
      })
    },
    /**
     * 当前商品选中事件
     */
    selectList (e) {
      const index = e.currentTarget.dataset.index
      let carts = this.carts
      console.log(this.carts)
      const id = carts[index].goodid
      const openid = this.openid
      console.log(id)
      console.log(openid)
      const selected = carts[index].selected
      carts[index].selected = !selected
      console.log(selected)
      this.carts = carts
      this.getTotalPrice()
    },

    /**
     * 删除购物车当前商品
     */
    deleteList (e) {
      const index = e.currentTarget.dataset.index
      let carts = this.carts
      carts.splice(index, 1)
      this.carts = carts
      if (!carts.length) {
        this.hasList = false
      } else {
        this.getTotalPrice()
      }
    },

    /**
     * 购物车全选事件
     */
    selectAll (e) {
      let selectAllStatus = this.selectAllStatus
      selectAllStatus = !selectAllStatus
      let carts = this.carts
      for (let i = 0; i < carts.length; i++) {
        carts[i].selected = selectAllStatus
      }
      this.selectAllStatus = selectAllStatus
      this.carts = carts
      this.getTotalPrice()
    },
    /**
     * 绑定加数量事件
     */
    addCount (e) {
      const index = e.currentTarget.dataset.index
      let carts = this.carts
      let num = carts[index].num
      num = num + 1
      carts[index].num = num
      this.carts = carts
      this.getTotalPrice()
    },

    /**
     * 绑定减数量事件
     */
    minusCount (e) {
      const index = e.currentTarget.dataset.index
      const obj = e.currentTarget.dataset.obj // eslint-disable-line no-unused-vars
      let carts = this.carts
      let num = carts[index].num
      if (num <= 1) {
        return false
      }
      num = num - 1
      carts[index].num = num
      this.carts = carts
      this.getTotalPrice()
    },

    /**
     * 计算总价
     */
    getTotalPrice () {
      let carts = this.carts
      let total = 0
      for (let i = 0; i < carts.length; i++) {
        if (carts[i].selected) {
          total += carts[i].num * carts[i].goodprice
        }
      }
      this.carts = carts
      this.totalPrice = total.toFixed(2)
      console.log(total.toFixed(2))
    },
    toOrder () {
      wx.navigateTo({
        url: '../../pages/order/main'
      })
    }
  },
  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.cart-box{
    padding-bottom: 100rpx;
}
.cart-list{
    position: relative;
    padding: 20rpx 20rpx 20rpx 285rpx;
    height: 185rpx;
    border-bottom: 1rpx solid #e9e9e9;
}
.cart-list .cart-pro-select{
    position: absolute;
    left: 20rpx;
    top: 90rpx;
    width: 45rpx;
    height: 45rpx;
}

.cart-list .cart-thumb{
    position: absolute;
    top: 20rpx;
    left: 85rpx;
    width: 185rpx;
    height: 185rpx;
}
.cart-list .cart-pro-name{
    display: inline-block;
    width: 300rpx;
    height: 105rpx;
    line-height: 50rpx;
    overflow: hidden;
}
.cart-list .cart-pro-price{
    display: inline-block;
    height: 105rpx;
    line-height: 50rpx;
}
.cart-list .cart-count-box{
    position: absolute;
    left: 285;
    bottom: 20rpx;
    width: 250rpx;
    height: 80rpx;
}
.cart-list .cart-count-box text{
    display: inline-block;
    line-height: 80rpx;
    text-align: center;
}
.cart-count-down,.cart-count-add{
    font-size: 44rpx;
    width: 50rpx;
    height: 100%;
}
.cart-count-num{
    width: 150rpx;
}
.cart-del{
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 44rpx;
}
.cart-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    padding:0 100rpx 0 80rpx;
    box-sizing: border-box;
    background: #8ed145;
    color: #fff;
}
.total-select{
    position: absolute;
    left: 20rpx;
    top: 25rpx;
    width: 45rpx;
    height: 45rpx;
}
.order-icon{
    position: absolute;
    right: 10rpx;
    top: 25rpx;
    width: 45rpx;
    height: 45rpx;
}
.order-icon image,.order-icon navigator{
  display: block;
  width: 45rpx;
  height: 45rpx;
}
.cart-toatl-price{
    float: right;
    width: 120rpx;
}

.cart-no-data{
    padding:40rpx 0;
    color: #999;
    text-align: center;
}
</style>
